code[class*="language-"],
pre[class*="language-"] {
	font-family: var(--mono-font), Consolas, Monaco, "Andale Mono",
		"Ubuntu Mono", monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	font-variant-ligatures: none;
	tab-size: 4;
	hyphens: none;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1.5rem;
	margin: 1.5rem 0;
	overflow: auto;
	border-radius: var(--border-radius);
	background-color: var(--lightest-background-color);
	color: var(--code-text-color);

	&.line-numbers-mode {
		padding-left: calc(1.5rem + 2.4em + 1.2rem);
	}
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background-color: var(--lightest-background-color);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: 0.1em;
	border-radius: 0.3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--code-comments-color);
}

.token.namespace {
	opacity: 0.7;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: var(--link-color);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: var(--link-color);
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.eslint-marked {
	/* Draw the wavy line. */
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23f14c4c'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
		repeat-x bottom left;

	/*
     * Since the character width of the token span is not constant,
     * if we use it as is, we may see a shift in the border.
     * To make the border shift less noticeable, draw it with a smaller width.
     */
	background-size: 4.4px auto;
}

.token.eslint-marked-on-line-feed {
	/* Use `padding` to give it width so the marker on line feed code is visible. */
	padding-right: 8px;
}

.token.eslint-marked:not(.eslint-marked-on-line-feed)
	+ .token.eslint-marked-on-line-feed {
	/*
     * If there is a marker before the same line,
     * there is no need to make visible the marker on the line feed code.
     */
	padding-right: 0;
}

.token.eslint-marked-on-zero-width {
	position: relative;

	/* Delete the wavy line. */
	background: none;
}

.token.eslint-marked-on-zero-width::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -2px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 4px solid #d11;
}

.line-numbers-wrapper {
	position: absolute;
	top: 0;
	left: 1.5rem;
	text-align: right;
	padding-top: 1.5rem;
	font-size: 1em;
	font-family: var(--mono-font), Consolas, Monaco, "Andale Mono",
		"Ubuntu Mono", monospace;
	line-height: 1.5;
	color: var(--icon-color);
	font-variant-ligatures: none;

	.line-number {
		user-select: none;
		color: var(--icon-color);
		display: inline-block;
		font-variant-numeric: tabular-nums;
		text-align: right;
		width: 1.2em;
	}
}
